:root {
	
	/* Color palette */
	  
	/* crimson sky */
	--main: #CF6766;  
	--dark_main: #CA6665;
	
	/* indigo */
	--secondary: #30415D;
	
	/* ultramarine */
	--text: #031424;
	
	/* light blue */
	--highlight: #8EAEBD;
	
	/* background gray */
	--background: #E8E8E8;
	
	--header_height: 7vh;
	
	--iconbox_size: 4vh;
	--iconbox_inner_size: 3.05vh;
	
	--border_size: 0.4vh;
	
	--font_size: 3vh;
	
  }
  
  /* General stuff */
  body {
	  display: flex;
	  font-family: 'Roboto Mono', monospace; 
	  font-weight: normal;
	  font-size: var(--font_size);
	  background-color: var(--background);
	  top: 0;
	  left: 0;
  }
  
  /* Header Content */
  header {
	  justify-content: right;
	  display: inline;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  height: var(--header_height);
	  line-height: var(--header_height);
	  background-color: var(--main);
	  z-index: 100;
  }
  
  header * {
	  
	  display: block;
	  width: 100vw;
  }
  
  #menus ul {
	  
	  width: 100vw;
	  text-align: center;
	  padding-left: 0px;
  }
  
  .menuToggle{
  
	  position:fixed;
	  top: 0;
	  left: 85vw;
	  width: var(--header_height);
	  height: var(--header_height);
  
  }
  
  .homeButton{
  
	position: relative;
	top: 0;
	left: calc(25vw + var(--font_size));
	width: auto;
	padding: 0px;
	text-align: center;
	width: var(--header_height);
	height: var(--header_height);
	text-decoration: none;
	color: var(--text);
  
  }
  
  .menuToggle img{
  
	  width: var(--header_height);
	  height: var(--header_height);
  
  }
  
  #menuItems {
  
	  position: relative;
	  display: none;
	  text-decoration: none;
	  color: var(--text);
	  justify-content: left;
	  padding-bottom: calc(var(--header_height) * 0.4);
  
  }
  
  nav {
	  background-color: var(--main);
  }
  
  /* Header menu buttons */
  #menus li a {
	  
	  text-align: center center;
	  text-decoration: none;
	  background-color: var(--main);
	  border-bottom: var(--border_size) solid var(--main); 
	  transition: border-bottom 300ms, background-color 300ms; 
	  color: var(--text);
  
  }
  
  #menus li a:hover {
	  background-color: var(--main);
	  border-bottom: var(--border_size) solid var(--text);
	  transition: border-bottom 300ms, background-color 300ms; 
  
  }
  
  #menus li a.active {
	  background-color: var(--main);
	  border-bottom: var(--border_size) solid var(--text);
	  transition: border-bottom 300ms, background-color 300ms; 
	  
  }
  
  
  /* External icons */
  #contact {
	  
	  position:relative;
	  
	  display: flex;
	  flex-direction: row;
	  justify-content: space-evenly; 
	  width: 100vw;
	  
	  align-items: center; 
	  text-align: center;
	  background-color: var(--main);
  }
  
  .iconBox {
	  
	  display: flex;
	  justify-content: center; 
	  align-items: center; 
	  text-align: center;
	  
	  height: var(--iconbox_size);
	  width:	var(--iconbox_size);			
	  
	  background-color:var(--main);
	  border: var(--border_size) solid var(--text);
	  position: relative;
	  
	  top: calc(var(--header_height) - (var(--iconbox_size) * 1.4));
	  
	  transition: border 200ms, background-color 200ms;
	  
	  overflow:hidden;
  }
  
  .iconBox:hover {
		  
	  background-color:var(--text);
	  border: var(--border_size) solid var(--text);
	  position: relative;
	  
  }
  
  .iconImg {
	  
	  position:absolute;
	  
	  right: 12%;
	  bottom: 12%;
	  
	  width: var(--iconbox_inner_size);
	  height: var(--iconbox_inner_size);
	  
	  
  }
  
  .iconBox:hover .iconImgHover {
		  
	  opacity: 0;
  }
  
  
  /* Other Stuff */
  

/* Other Stuff */
.simpleButton {
	
	background-color: var(--main);
	border-radius: 2px;
	border: 3px solid var(--secondary);
	padding: 8px 18px;
	font-size: 22px;
	
	text-decoration: none;
	color: var(--secondary);
	
	transition: background-color 100ms, color 100ms;
}

.simpleButton:hover {
	
	background-color: #30415D;
	color: #CF6766;
}

.fancyButton {
	
	position: relative;
	
	background-color: transparent;
	border-radius: 2px;
	border: 3px solid var(--secondary);
	padding: 3vh;
	
	
	font-size: 22px;
	text-decoration: none;
	color: #30415D;
	z-index: 1;
	
	transition: all 300ms ease-in-out;
}

.fancyButton::before {
	
	content: '';
	position: absolute;
	
	width: 100%;
	height: 120%;
		
	border: 3px solid var(--secondary);	
	opacity: 0;
	
	transform: translateX(-4.5vh) translateY(-1vh);
	transition: all 300ms ease-in-out;
	
}

.fancyButton::after {
	
	content: '';
	position: absolute;
	
	width: 100%;
	height: 120%;
	
	border: 3px solid var(--secondary);
	opacity: 0;
	
	transform: translateX(4.5vh) translateY(-1vh);
	transition: all 300ms ease-in-out;
	
}

.fancyButton:hover::before {
	
	opacity: 1;
	transition: all 300ms ease-in-out;
	
}

.fancyButton:hover::after {
	
	opacity: 1;
	transition: all 300ms ease-in-out;
}

.fancyButton:hover {
	
	padding: 5.5vh;
	transition: all 300ms ease-in-out;
}

.buttonContainer {
	position: relative;
	
	/* padding-top: 1.3vh; */
	padding-bottom: 1vh;
	
	overflow:hidden;
	width: auto;
	height: calc(auto + 30%);
	
	
	
	/* border: 3px solid var(--secondary); */
}


/* Sections */

section {
	
    height: 100vh;
	width: 98.5vw;
    border-bottom: 4px solid var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	
	flex-direction: column;
	background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
}

.bigImg {
	
	display:block;
	
	min-width: 50px;
	min-height: 50px;
	
	width: 30vh;
	height: 30vh;
	
	max-width: 500px;
	max-height: 500px;

	object-fit: cover;	
	overflow: hidden;
	
	border-radius: 50%;
	border: 4px solid var(--secondary);

	
}

.outerCircle {

	border-radius: 50%;
	border: 4px solid var(--secondary);
}

#about-top {

    display: flex;
	
	flex-direction: column;
	justify-content: center;
	align-items: center; 
	text-align: center;
	
	column-gap: 1%;
	
	font-size: var(--font_size);
	
	margin-top: 10vh;
	
	height: 90vh;
	border-bottom: 4px solid var(--background);
	
}

h1 {
	
	font-size: calc(var(--font_size) * 1.5);
	margin: 1vw;
	margin-top: 4vh;
}

* {
	margin: 0px;
}

.rightSide {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	height: 100vh;
	
	background-color: var(--background);
	
}
		
.leftSide {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100vh;
	width: 25vw;
	padding-right: 80px;
	padding-left: 80px;
	background-color: var(--background);
	/* border-right: 1px solid grey; */
	
}